<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>底部导航</title>
    <link rel="stylesheet" type="text/css" href="../../css/api1.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style1.css"/>
    <style>
        header{ background-color: #f2f2f2; }
        header ul li { height: 50px; line-height: 50px; text-align: center; display: none; color: #323237; position: relative;font-size: 18px;  }
        header ul li.active{ display: block; }
        #footer{  background-color: #f2f2f2;}
        #footer ul li{  padding-top: 30px; padding-bottom: 8px; background: url() no-repeat center 2px; background-size: 25px 25px; text-align: center; }
        #footer ul li.active{ color: #000; }
        #footer ul li:nth-child(1){ background-image: url(../../icon/message.png); }
        #footer ul li:nth-child(2){ background-image: url(../../icon/approve.png); }
        #footer ul li:nth-child(3){ background-image: url(../../icon/oppose.png); }
        #footer ul li:nth-child(4){ background-image: url(../../icon/collect.png); }
        #footer ul li:nth-child(1).active{ background-image: url(../../icon/message.png); }
        #footer ul li:nth-child(2).active{ background-image: url(../../icon/agreechousen.png); }
        #footer ul li:nth-child(3).active{ background-image: url(../../icon/oppose.png); }
        #footer ul li:nth-child(4).active{ background-image: url(../../icon/collect.png); }
        .flex-con{
          overflow: scroll;
        }
        .fixed_bottom {
           position:fixed;
           left:0px;
           bottom:0px;
           width:100%;
           height:7%;
           z-index:10;
        }
        .fixed_top {
           position:fixed;
           left:0px;
           top:0px;
           width:100%;
           height:7%;
           z-index:10;
        }
        .header-box {
          position: relative;
          width: 100%;
          height: 100%;
          background-color: #ffffff
        }
        header {
          width: 100%;
          height: 100%;
          background-color: #ffffff;
          z-index: 10;

        }
        header .left {
          position: absolute;
          top: 15px;
          width: 21.5px;
          height: 15.5px;
          left: 15px;
          background-image: url(../../icon/back.png);
          background-size: 21.5px 15.5px;
          background-position: center center;
          background-repeat: no-repeat;
        }
        header .center {
          position: relative;
          width: 75%;
          height: 50%;
          left: 45px;
          padding-top: 3%;
          font-size: 20px; color: #000; text-align: center;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
        header .right {
          position: absolute;
          top: 15px;
          width: 5px;
          height: 19px;
          right: 15px;
          background-image: url(../../icon/more.png);
          background-size: 5px 19px;
          background-position: center center;
          background-repeat: no-repeat;
        }
				.title {
          /*border: 1px solid red;*/
          position: relative;
          width: 100%;
          height: auto;
          padding-left: 24px;
          padding-top: 15%;
          padding-right: 24px;
          box-sizing: border-box;
          font-size: 20px; color: #000000; text-align: left;
          font-weight: bold;
        }
        .tag {
          /*border-bottom: 1px solid #d3d2d2;*/
          /*border: 1px solid blue;*/
          position: relative;
          width: 100%;
          height: auto;
          padding-left: 24px;
          padding-top: 10px;
          box-sizing: border-box;
          font-size: 12px; color: #917dcf; text-align: left;
        }
        .answer {
          /*border: 1px solid red;*/
          position: relative;
					margin-top: 15%;
          width: 100%;
          height: auto;
          font-size: 15px; color: #000000; text-align:justify;
        }
        .answer .replyer {
          /*border: 1px solid red;*/
          width: 100%;
          height: 36px;
          background-color: #fff;
          padding-top: 0px;
        }
        .replyer .replyer-left {
          width: 36px;
          height: auto;
          float: left;
          padding-left: 24px;
        }
        .replyer-left .replyer-imag {
          width: 36px;
          height: 36px;
        }
        .replyer-imag img {
          width: 36px;
          height: 36px;
          border-radius: 18px;
        }
        .replyer .replyer-right {
          /*border: 1px solid blue;*/
          width: 180px;
          height: auto;
          float: left;
        }
        .replyer-right .replyer-name {
          width: auto;
          height: 16px;
          font-size: 16px; color: #000000; text-align: left;
          padding-left: 8px
        }
        .replyer-right .replyer-note {
          width: auto;
          height: 14px;
          font-size: 12px; color: #8e8e8e; text-align: left;
          padding-top: 10px;
          padding-left: 8px
        }
        .replyer .follow {
          /*border: 1px solid blue;*/
          width: 78px;
          height: 30px;
          float: right;
          margin-right: 24px;
          background-color: #6d7cd9;
          border-radius: 4px;
          font-size: 16px; color: #fff; text-align: center;
          line-height: 30px;
        }

        .answer .content-body {
        	position: relative;
					width: 90%;
          left: 5%;
          padding-top: 10%;
          font-size: 15px; color: #fff; text-align: left;
        }
        .content-imag {
          width: 100%;
          position: relative;
          padding-top: 7%;
					padding-bottom: 20%;
        }
        .content-imag img {
        	position: relative;
          width: 90%;
          height: 20%;
					left: 5%;
          border-radius: 14px;
        }
        #little-window ul li {
          height:50px;
          font-size: 16px; color: #000; text-align: center;
          line-height: 50px;
        }
        .little-window {
          /*border: 1px solid red;*/
          position: fixed;
          right: 24px;
          top: 50px;
          height: 100px;
          width: 113.5px;
          background-color: #fff;
          font-size: 16px;color: #000; text-align: center;
          z-index: 10;
          box-shadow:  darkgrey  1px 1px 1px 1px;
        }


    </style>
</head>
<body>
<div id="wrap" class="flex-wrap flex-vertical">

    <div id="main">
      <div class="fixed_top">
      <header id="header" class="header-box">
        <div class="left" onclick="back()"></div>
        <div class="center">现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？</div>
        <div class="right" onclick="little_window()"></div>
      </header>
      </div>
      <div id='little-window' class="little-window" style="display:none">
        <ul>
          <li>分享</li>
          <li>举报</li>
        </ul>
      </div>
      <div id = "title" class="title" onclick="closelitwindow()">
      现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？
      </div>

    </div>

    <div class="answer" onclick="closelitwindow()">
      <div class="replyer">
        <div class="replyer-left">
          <div class="replyer-imag">
            <img src="../../image/09-014416_603.jpg" alt="">
          </div>
        </div>
        <div class="replyer-right">
          <div class="replyer-name">我是一只大橙子</div>
          <div class="replyer-note">UI问题优秀回答者</div>
        </div>
        <div id="follow_logo" class="follow" onclick="change_follow()">+关注</div>
      </div>

      <div id='answer_content' class="content-body">
<p>当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，当代社会中层年轻人刚好是计划生育赶上的一代当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，当代社会中层年轻人刚好是计划生育赶上的一代当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，当代社会中层年轻人刚好是计划生育赶上的一代</p>
</div>
      <div class="content-imag">
        <img src="../../image/eg_tulip.jpg" alt="">
      </div>
    </div>

    <div id="footer" class="fixed_bottom">
        <ul class="flex-wrap" >
            <li tapmode="hover" onclick="open_comment()" class="flex-con active" ></li>
            <li tapmode="hover" onclick="approve(this)" class="flex-con" ></li>
            <li tapmode="hover" onclick="disapprove(this)" class="flex-con" ></li>
            <li tapmode="hover" onclick="collect( this )" class="flex-con" >120</li>
        </ul>
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript" src="../../script/dropload.min.js"></script>
<script type="text/javascript">
var nominate = 1;
var json_dict = {
"app_version":"",
"user_id":"",
"user_cookie":"",
"question_id":123,
"answer_id":123,
"since_id": 0,
"page_size": 10
};

var json_data= {};

    apiready = function () {
      var main = $api.byId('header');
      var title = $api.byId('title');
      var footer = $api.byId('footer');

      var header_H = $api.offset(header).h;
      var title_H = $api.offset(title).h;
      var footer_H = $api.offset(footer).h;
      var footer_T = $api.offset(footer).t;
      Getdata(json_dict);
      json_data.title = '现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？';
			json_data.tag = new Array('旅游','游戏','学业');
      json_data.detail = '一代不如一代一代不如一代一代不如一代一代不如一代一代不如一代一代不如一代一代不如一代！';
      json_data.answer_content = '是啊一是啊一代不是啊一是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代是啊一代不如一代'
      json_data.like_num = 12;
      json_data.dislike_num = 13;
      json_data.comm_num = 7;
      question_view();
    }

    function Getdata(json) {
      $.ajax({
        type: "post",
        url: "../../questionAnswer/getComment/",
          dataType : "json",
          data: JSON.stringify(json),
          success: function (d) {
          json_data = d; //是否需要将json转化为{}才能赋给json_data?
        }
      });
    }

    function question_view() {
      document.getElementById('title').innerHTML = json_data.title;
			// var tag_content = '';
			// for (var i = 0; i<json_data.tag.length; i++) {
			// 	if (i == 0) {
			// 		tag_content = tag_content + json_data.tag[i];
			// 	}
			// 	else {
			// 		tag_content = tag_content + ' · ' + json_data.tag[i];
			// 	}
			// }
      // document.getElementById('tag').innerHTML = tag_content;
			document.getElementById('answer_content').childNodes[1].innerHTML = json_data.answer_content;
      document.getElementById('footer').childNodes[1].childNodes[1].innerHTML = json_data.comm_num;
      document.getElementById('footer').childNodes[1].childNodes[3].innerHTML = json_data.like_num;
      document.getElementById('footer').childNodes[1].childNodes[5].innerHTML = json_data.dislike_num;

    }

    function approve(tag) {
      if(  $api.hasCls(tag,'active') ) {
        $api.removeCls(tag, 'active');
        document.getElementById('footer').childNodes[1].childNodes[3].innerHTML = parseInt(document.getElementById('footer').childNodes[1].childNodes[3].innerHTML) - 1 ;

      }
      else {
        $api.addCls(tag, 'active');
        document.getElementById('footer').childNodes[1].childNodes[3].innerHTML = parseInt(document.getElementById('footer').childNodes[1].childNodes[3].innerHTML) + 1 ;
      };
      }

          function disapprove(tag) {
            if( $api.hasCls(tag,'active') ) {
              $api.removeCls(tag, 'active');
              document.getElementById('footer').childNodes[1].childNodes[5].innerHTML = parseInt(document.getElementById('footer').childNodes[1].childNodes[5].innerHTML) - 1 ;

            }
            else {
              $api.addCls(tag, 'active');
              document.getElementById('footer').childNodes[1].childNodes[5].innerHTML = parseInt(document.getElementById('footer').childNodes[1].childNodes[5].innerHTML) + 1 ;
            };
            }

            function collect(tag) {
  						if( $api.hasCls(tag,'active') ) {
  			              $api.removeCls(tag, 'active');
  			              document.getElementById('footer').childNodes[1].childNodes[7].innerHTML = parseInt(document.getElementById('footer').childNodes[1].childNodes[7].innerHTML) - 1 ;

  			            }
  			      else {
  			              $api.addCls(tag, 'active');
  			              document.getElementById('footer').childNodes[1].childNodes[7].innerHTML = parseInt(document.getElementById('footer').childNodes[1].childNodes[7].innerHTML) + 1 ;
  			            };
  					}


    function open_comment() {
      api.openFrame({
                name: 'comment',
                url: './comment_box.html',
                rect: {
                        x:0,
                        y:0,
                        w:api.winWidth,
                        h:api.winHeight
                },
                pageParam:{
                    type:"question",
                    question_id:1
                }
                bgColor: 'rgba(0,0,0,0.6)',
                // bounces: false,
    });
  }

	function change_follow() {
		var flag;
		if (document.getElementById('follow_logo').innerHTML == '+关注') {
			flag = 1; //表示关注动作
			document.getElementById('follow_logo').innerHTML = '取消关注';
		}
		else {
			flag = 0; //表示取消关注动作
			document.getElementById('follow_logo').innerHTML = '+关注';
		}

	}

var litwindow = $api.dom('#little-window');

  function little_window() {
    if (litwindow.style.display == "none") {
      litwindow.style.display = '';
    }
    else {
      litwindow.style.display = 'none';
    }
  }
  function closelitwindow() {
    litwindow.style.display = 'none';
  }


</script>
